<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-11-08 09:51:45
 * @LastEditors: raoyonggang 11886335+ryg321@user.noreply.gitee.com
 * @LastEditTime: 2024-05-27 17:30:53
 * @FilePath: \my-electron\src\views\AboutView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="about">
    <!-- <h1 @click="backWin" class="back-btn" v-if="showCloseBtn">返回</h1> -->
    <div class="controls-wrap">
      <div @click="closeWin" class="close-btn" v-if="showCloseBtn">
        <img src="../assets/close.png" alt="">
        <p>关闭</p>
      </div>
      <div class="setting" @click="setting" v-if="showCloseBtn">
        <img class="setting-img" src="../assets/c-shezhi.png" alt="" />
        <p>设置</p>
      </div>
    </div>
    <webview
      id="foo"
      :src="webviewUrl"
      style="display: inline-flex; width: 100%; height: calc(100vh - 20px)"
    ></webview>
    
  </div>
</template>

<script>
export default {
  name: "AboutView",
  data() {
    return {
      text: "",
      num: 1,
      webviewUrl: "http://192.168.1.5:8081#/login?redirect=%2F",
      list: ''
      // webviewUrl: 'https://new.caidj.net.cn/wap_sort#/login?redirect=%2F',
      // preload="file://E:/cdjDemoProject/my-electron/src/views/preload.js"
    };
  },
  methods: {
    // 关闭
    closeWin() {
      window.close();
    },
    //  返回
    backWin() {
      this.$router.push("/");
    },
    setting() {
      this.$router.push("/setting");
    },
  },
  computed: {
    showCloseBtn() {
      return this.webviewUrl.includes("login");
    },
  },
  mounted() {
    setTimeout(() => {
      const webview = document.getElementById("foo");
      webview.addEventListener("did-navigate-in-page", () => {
        this.webviewUrl = webview.getURL();
      });
      webview.openDevTools();
      // const electron = window.require('electron')
      // electron.ipcRenderer.on('ping', (event, arg) => {
      //   console.log(event, arg);
      // })
      }, 500);
  },
};
</script>
<style lang="scss" scoped>
.back-btn {
  position: absolute;
  top: 30px;
  cursor: pointer;
}
.setting,
.close-btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 122px;
  height: 58px;
  background-image: url("../assets/btnbg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  p {
    font-size: 20px;
    font-family: PingFang SC, PingFang SC;
    color: #333333;
    margin: 0 0 0 5px;
  }
  img {
    width: 24px;
  }
}
.controls-wrap {
  position: absolute;
  top: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  .setting {
    margin-left: 12px;
  }
}
.back-btn {
  left: 30px;
}
</style>